用不用 TypeScript 隨便你，反正我是用了

• 講者簡報
• 保哥的 TypeScript 新手指南

講者保哥是 TypeScript 的支持者。議程目的是對還沒使用 TypeScript 的開發者進行 promotion。所以對已經在使用 TypeScript 的開發者來說內容比較入門，也比較多是在宣傳 TypeScript 的好處。

使用 TypeScript 的理由

• 強型別
• 更著重設計
• 適合多人開發的專案
• 與現有專案無縫整合
• 非常完整的開發工具支援
• 持續發展的社群

Key Remapping in Mapped Types - QueryResult

soure code

議程中保哥有介紹到一個在 v4.1 中推出，算是進階的使用特性。只要為 querySelector 的 function 宣告為型別 - QueryResult，並將 querySelector 的執行結果指派到變數，就能只透過參數傳入的 selector，就能推敲出變數的型別。

sample.ts

type QueryResult<T extends string> = MatchEachElement<GetElementNames<T>>;

/**
 * Example
 */
declare function querySelector<T extends string>(query: T): QueryResult<T>;

const a = querySelector('div.banner > a.call-to-action')
const b = querySelector('input, div')
const c = querySelector('circle[cx="150"]')
const d = querySelector('button#buy-now')
const e = querySelector('section p:first-of-type');

sample.d.ts

declare const a: HTMLAnchorElement | null;
declare const b: HTMLDivElement | HTMLInputElement | null;
declare const c: SVGCircleElement | null;
declare const d: HTMLButtonElement | null;
declare const e: HTMLParagraphElement | null;

不過透過這個例子，保哥也強調，學習 TypeScript 並不是要成為語言學家。有實務需求再去學就好，掌握基本特性就夠日常開發。

採用 TypeScript 前你該考慮的十件事

• 講者簡報

講者 Jeremy 跟保哥的立場相反，反對在專案中導入 TypeScript。他先列出 TypeScript 看似不錯的優點 -

• 為程式碼文件化
• 作為開發工具可便利撰寫過程
• 避免大部分明顯或低級的錯誤
• 已成為流行，社群也很發達

不使用 TypeScript 的理由

• 開發跟維護都會花更多的時間
• 解讀程式會更慢，可讀性變差(可以參考 slides 裡的對比圖)
• 不安全與安全感假象

這裡提到一個名詞 Soundness(健全性)。在符合 Soundness 的型別系統中，不會在編譯或執行時 出現表達式與預期型別不匹配的情況。

而 Soundness 是有分級別的。以 TypeScript 來說，他算是具有一定程度的健全性。例如以下程式是可以捕捉到的錯誤

const increment = (i: number): number => {
    returni + '1';
};
const countdown: number = increment('98765432');

不過 TypeScript 也很明確提出 100% Soundness 不是他的目標，也就是他不能保證變數在執行時具有定義的型別。例如

interface A {
    x: number;
}

let a: A = { x: 3 };
let b: { x: number | string } = a;
b.x = 'unsound';
let x: number = a.x; // unsoundness

a.x.toFixed(0); // what?

上面的程式碼是不正確的，因為從 A 介面中可知 a.x 應該是一個數字。不幸的是，經過一些重新賦值後，它最終以一個字串的形式出現，並且後面的程式碼能通過編譯，但會在執行時出錯。

尤其如果使用 TypeScript 的 any，更容易出現這種錯誤。

講者提出的解法

• 改用 Facebook 開發的 Flow
  Flow 是 Facebook 開發的型別檢查工具。

  更多與 TypeScript 的比較可以在 Github 的這篇文章查看。

  建置步驟 :

  1. npm i -g flow-bin
  2. npm i -d @babel/core @babel/cli @babel/preset-flow
  3. 新增 babel.config.js，在 presets 欄位加入 @babel/preset-flow
  4. npm run flow init 產生 .flowconfig
  5. VSCode 的設定，把 JavaScript › Validate: Enable 關掉
  6. 安裝 VSCode plugin Flow Language Support。在撰寫程式碼時直接告知錯誤

  在使用上，只要在想進行型別加註和檢查的 js 檔的開頭加 // @flow 即可。

• 以 xstate 做資料的狀態管理

  XState 是一個狀態管理(State Management)的 Library，負責儲存及描述各種狀態與各種狀態間的轉換，有點類似於 Redux、Flux，不同的地方在於 XState 整個核心都源自於 Statecharts，也就是我們需要定義好整個應用程式會有哪些狀態，和每個狀態下能轉換到哪些狀態(順序性)以及他們之間如何轉換。XState 簡介

• 以 FP(Functional Programming)轉換開發思維

• 使用其他語言(e.g. Dart / Clojure / Elm ...)

我還是想用 TypeScript 何解?

• 先了解 type checker 的運作原理與限制，並小心繞過去
• 使用 Algebraic Data Type(ADT) pattern
  • An Introduction to ADTs and Structural Pattern Matching in TypeScript
  • Using TypeScript ADT's to write more reliable React
• 使用 v4.1 出的 template literal types 做 type-level programming

參考資源

• Is TypeScript Worth It?(原文)
• Is TypeScript Worth It?(中文)